# 我的需求列表页 - TAPD需求文档

需求背景（补充业务场景与触发原因）：

客户在提交需求后，需要能够方便地查看和管理自己提交的所有需求。目前客户无法统一查看自己的需求列表，无法快速了解需求的状态、进度和更新情况，导致客户需要频繁联系顾问询问需求进展，沟通成本高。需要一个需求列表页面，让客户能够集中查看所有需求，支持按状态筛选和搜索，快速了解每个需求的关键信息（状态、优先级、更新时间等），提升客户自主查询需求信息的效率，减少不必要的沟通成本。


需求价值（补充对业务的价值）：

1. **提升客户自主查询能力**：通过需求列表页面，客户可以自主查看所有需求的状态和进度，减少对顾问的依赖，降低沟通成本。
2. **提升客户体验**：客户可以快速了解需求的最新状态，包括是否已报价、是否已签约等关键信息，提升客户对服务的满意度。
3. **支持需求管理**：通过状态筛选和搜索功能，帮助客户快速定位特定需求，提升需求管理效率。
4. **建立需求跟踪机制**：通过列表展示需求的状态流转（已提交→评估中→已报价→已签约→实施中→已完成），让客户清晰了解需求处理流程。
5. **支持业务数据分析**：通过需求列表数据，可以分析客户需求分布、状态分布等，支持业务决策。



需求目标（说明该需求要解决的问题或达成的目标）：

1. **提供需求列表展示**：作为客户查看所有需求的主要入口，集中展示客户提交的所有需求信息。
2. **支持状态筛选**：提供按需求状态筛选的功能（全部、已提交、评估中、已报价、已签约、实施中、已完成），帮助客户快速定位特定状态的需求。
3. **支持搜索功能**：提供搜索框，支持按需求标题或描述搜索，帮助客户快速找到特定需求。
4. **展示关键信息**：在需求卡片中展示关键信息（标题、状态、分类、优先级、描述、更新时间、紧急标识），让客户快速了解需求概况。
5. **支持需求详情跳转**：点击需求卡片后跳转到需求详情页，查看需求的完整信息。



用户故事（不同的视角下，希望的结果）：

**作为客户，我希望：**
- 能够在一个页面中查看我提交的所有需求，了解每个需求的状态和最新进展。
- 能够通过状态筛选（如只看"已报价"的需求），快速找到我关心的需求。
- 能够通过搜索功能，输入关键词快速找到特定的需求。
- 在需求列表中能够看到关键信息（状态、优先级、更新时间、是否紧急），快速判断需求的优先级和紧急程度。
- 点击需求卡片后能够跳转到详情页，查看需求的完整信息和处理进度。

**作为顾问，我希望：**
- 客户能够自主查看需求列表和状态，减少"我的需求现在什么状态"这类基础咨询，让我有更多时间处理核心业务。
- 客户能够通过列表快速了解需求状态，减少因信息不对称导致的沟通成本。

**作为产品经理，我希望：**
- 需求列表页面能够提升客户自主查询能力，降低对顾问的依赖，提升整体服务效率。
- 通过状态筛选和搜索功能，提升客户查找需求的效率，提升用户体验。
- 需求列表作为需求管理的入口，能够引导客户查看详情、查看报价、查看协议等后续操作。



需求描述（详细阐述需求的行为逻辑、交互流程或后台规则）：

**1. 页面布局结构**
- 包含以下主要区域（从上到下）：
  - 顶部导航栏
  - 搜索框区域（位于导航栏下方）
  - 筛选标签区域（横向滚动，显示状态筛选标签）
  - 需求列表区域（可滚动，显示需求卡片列表）
  - 底部导航栏（固定底部，包含首页、需求、案例、我的四个Tab）

**2. 导航栏**
- 显示标题"我的需求"
- 导航栏固定在顶部，滚动时保持可见

**3. 搜索功能**
- **搜索框位置**：位于导航栏下方，白色背景区域
- **搜索框样式**：左侧显示搜索图标，右侧为输入框
- **搜索逻辑**：
  - 支持实时搜索或点击搜索按钮触发搜索
  - 搜索范围：需求标题和需求描述
  - 支持模糊匹配，不区分大小写
  - 搜索时过滤需求列表，只显示匹配的需求
  - 清空搜索框时，恢复显示所有需求（或当前筛选状态下的需求）
- **搜索交互**：
  - 输入关键词后，自动过滤列表（或点击搜索按钮）
  - 搜索时显示加载状态（可选）
  - 无搜索结果时，显示"暂无匹配的需求"提示

**4. 状态筛选功能**
- **筛选标签**：横向排列，支持横向滚动
- **筛选选项**：
  - 全部（默认选中）
  - 已提交
  - 评估中
  - 已报价
  - 已签约
  - 实施中
  - 已完成
- **筛选逻辑**：
  - 点击标签后，切换选中状态
  - 选中"全部"时，显示所有状态的需求
  - 选中其他状态时，只显示该状态的需求
  - 同时只能选中一个标签
  - 筛选后，需求列表自动更新
- **筛选样式**：
  - 选中状态：蓝色背景，白色文字
  - 未选中状态：灰色背景，深灰色文字
  - 标签支持横向滚动，确保所有标签都能访问

**5. 需求列表展示**
- **列表布局**：垂直排列，每个需求一个卡片
- **数据来源**：从后端获取当前登录用户的所有需求数据
- **排序规则**：按更新时间倒序排列（最新的在前）
- **分页加载**（可选）：
  - 初始加载显示前20条需求
  - 滚动到底部时，自动加载更多需求
  - 或提供"加载更多"按钮

**6. 需求卡片信息展示**
每个需求卡片包含以下信息：
- **需求标题**：显示在卡片顶部，字体较大，加粗显示
- **需求状态**：显示在标题右侧，用不同颜色的标签表示
  - 已提交：黄色标签
  - 评估中：蓝色标签
  - 已报价：靛蓝色标签
  - 已签约：紫色标签
  - 实施中：青色标签
  - 已完成：绿色标签
- **需求分类**：显示在标题下方，灰色标签显示（如"企业服务"、"管理资源"、"AI+RPA"）
- **优先级标识**：
  - 用不同颜色的圆点表示优先级
  - 高优先级：橙色圆点
  - 中优先级：黄色圆点
  - 低优先级：灰色圆点
  - 圆点旁边显示优先级文字（高/中/低）
- **需求描述**：显示在优先级下方，最多显示2行，超出部分用省略号表示
- **时间信息**：
  - 显示"提交于"或"最后更新"时间
  - 格式：YYYY-MM-DD HH:mm
- **紧急标识**（可选）：
  - 如果需求标记为紧急，在时间信息右侧显示红色圆点
  - 未标记为紧急的需求不显示该标识

**7. 需求卡片点击交互**
- 点击需求卡片任意区域，跳转到需求详情页（customer-requirement-detail.html）
- 跳转时传递需求ID参数，详情页根据ID加载对应需求数据
- 点击反馈：按下时有轻微的视觉反馈（如背景色变化或阴影变化）

**8. 底部导航栏**
- 固定在页面底部，包含四个Tab：
  - 首页：跳转到客户首页（customer-home.html）
  - 需求：当前页面（customer-requirement-list.html），选中状态高亮显示
  - 案例：跳转到案例列表页（当前为占位链接）
  - 我的：跳转到个人中心（customer-profile.html）
- 当前选中的Tab用蓝色高亮显示图标和文字
- 点击Tab后跳转到对应页面

**9. 数据获取规则**
- **接口调用**：
  - 页面加载时，调用后端接口获取需求列表数据
  - 接口需要传递当前登录用户的ID或token
  - 接口返回需求列表数据，包含：需求ID、标题、状态、分类、优先级、描述、提交时间、更新时间、是否紧急等字段
- **数据过滤**：
  - 前端根据选中的筛选标签，过滤需求列表
  - 前端根据搜索关键词，过滤需求列表
  - 筛选和搜索可以同时生效（先按状态筛选，再按关键词搜索）
- **数据更新**：
  - 页面支持下拉刷新（可选），刷新时重新获取最新数据
  - 或提供刷新按钮，点击后重新加载数据

**10. 空状态处理**
- **无需求时**：显示"暂无需求"提示，引导用户去提交需求
- **筛选无结果时**：显示"暂无匹配的需求"提示
- **搜索无结果时**：显示"未找到相关需求"提示

**11. 加载状态处理**
- 数据加载时，显示加载动画或骨架屏
- 加载失败时，显示错误提示和重试按钮

**12. 异常处理**
- 网络请求失败时，显示友好的错误提示，支持重试
- 数据格式错误时，显示错误提示，不影响页面基本显示
- 跳转目标页面不存在时，显示错误提示



验收标准（列出明确、可验证的交付标准）：

**1. 页面布局验收**
- [ ] 导航栏固定在顶部，包含标题
- [ ] 搜索框正确显示在导航栏下方
- [ ] 筛选标签区域支持横向滚动，所有标签都能访问
- [ ] 需求列表区域支持垂直滚动
- [ ] 底部导航栏固定在底部，四个Tab正确显示

**2. 搜索功能验收**
- [ ] 搜索框正常显示，包含搜索图标
- [ ] 输入关键词后，能够正确过滤需求列表
- [ ] 搜索范围包括需求标题和描述
- [ ] 支持模糊匹配，不区分大小写
- [ ] 清空搜索框后，恢复显示所有需求
- [ ] 无搜索结果时，正确显示提示信息

**3. 状态筛选验收**
- [ ] 所有筛选标签正确显示（全部、已提交、评估中、已报价、已签约、实施中、已完成）
- [ ] 默认选中"全部"标签
- [ ] 点击标签后，正确切换选中状态
- [ ] 选中状态样式正确（蓝色背景，白色文字）
- [ ] 筛选后，需求列表正确更新，只显示对应状态的需求
- [ ] 筛选和搜索可以同时生效

**4. 需求列表展示验收**
- [ ] 需求列表正确显示所有需求卡片
- [ ] 需求按更新时间倒序排列（最新的在前）
- [ ] 每个需求卡片包含所有必要信息（标题、状态、分类、优先级、描述、时间）
- [ ] 需求描述超出2行时，正确显示省略号
- [ ] 紧急需求正确显示红色圆点标识

**5. 需求卡片信息验收**
- [ ] 需求标题正确显示，字体加粗
- [ ] 需求状态标签正确显示，颜色与状态对应
- [ ] 需求分类标签正确显示
- [ ] 优先级圆点和文字正确显示，颜色与优先级对应
- [ ] 时间信息正确显示，格式为YYYY-MM-DD HH:mm
- [ ] 紧急标识正确显示（仅紧急需求显示）

**6. 交互功能验收**
- [ ] 点击需求卡片后，正确跳转到需求详情页
- [ ] 跳转时正确传递需求ID参数
- [ ] 点击底部导航栏Tab后，正确跳转到对应页面
- [ ] 当前选中的Tab正确高亮显示
- [ ] 所有可点击元素都有点击反馈效果

**7. 数据获取验收**
- [ ] 页面加载时，正确调用后端接口获取需求列表
- [ ] 接口正确传递用户身份信息
- [ ] 返回的数据正确解析和展示
- [ ] 数据加载时，正确显示加载状态
- [ ] 数据加载失败时，正确显示错误提示和重试按钮

**8. 空状态处理验收**
- [ ] 无需求时，正确显示"暂无需求"提示
- [ ] 筛选无结果时，正确显示"暂无匹配的需求"提示
- [ ] 搜索无结果时，正确显示"未找到相关需求"提示

**9. 异常处理验收**
- [ ] 网络请求失败时，正确显示错误提示，支持重试
- [ ] 数据格式错误时，正确显示错误提示
- [ ] 跳转目标页面不存在时，正确显示错误提示

**10. 性能要求验收**
- [ ] 页面加载时间不超过2秒
- [ ] 列表滚动流畅，无卡顿现象
- [ ] 搜索和筛选响应及时，无明显延迟
- [ ] 支持大量需求数据时，性能表现良好（可考虑分页或虚拟滚动）

**11. 数据准确性验收**
- [ ] 需求列表数据与数据库一致
- [ ] 需求状态与后端定义一致
- [ ] 需求分类与后端定义一致
- [ ] 优先级标识与后端定义一致
- [ ] 时间信息正确显示，时区处理正确